<template>
  <!-- 举报页面 -->
  <el-dialog title="举报文章信息填写" :visible.sync="dialogReport" width="50%" :show-close="false">
    <div class="report">
      <div class="report">
        <!-- 头像 -->
        <div class="headimg" v-if="walls.user_pic">
          <img :src="walls.user_pic" alt="头像" />
        </div>
        <div class="headimg_div" v-else>匿名</div>
        <div>
          昵称: {{walls.nickname?walls.nickname:'匿名'}}
          <div>来自: {{walls.from?walls.from:'未知'}}</div>
          <div v-if="walls.def_type">发布类型: {{walls.def_type}}</div>
          <div class="message">
            <p>发布内容: {{walls.message}}</p>
          </div>
          <div class="picture" v-if="walls.pic_walls">
            发布图片:
            <div class="box-item" v-for="(subItem,i) in walls.pic_walls" :key="i">
              <img :src="subItem" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 举报阐述 -->
    <textarea
      class="textarea"
      rows="4"
      cols="70"
      v-model="expound"
      placeholder="请详细说明违规用户的违规区域(昵称，来自，发布内容，发布图片，头像)"
    ></textarea>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closedialog">取消举报</el-button>
      <el-button type="primary" @click="submitReport">提交举报</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogReport", "walls"],
  data() {
    return {
      dialogVisible: false, //控制对话框的显示与隐藏
      expound: "", //举报者的举报阐述
    };
  },
  methods: {
    // 提交举报的回调
    submitReport() {
      if (this.expound.trim() === "") {
        return this.$message({
          type: "error",
          message: "举报阐述不能为空哦",
        });
      }
      // 整理参数
      let { nickname, user_pic, from, message } = this.walls;
      let data = {};
      Object.assign(data, { nickname, user_pic, from, message });
      // 我们要对pic_walls这个数组字段拼接成字符串(要判断是否有这个字段)
      if (this.walls.pic_walls) {
        this.walls.pic_walls.forEach((item, i) => {
          // 通过三个下划线分隔 如果第一张不需要用下划线分隔
          if (i === 0) {
            data.pic_walls += item;
          } else {
            data.pic_walls += "___" + item;
          }
        });
      }
      data.expound = this.expound; //举报者阐述
      data.def_type = this.walls.def_type; //自定义类型
      data.walls_id = this.walls.id; //文章id
      data.author_id = this.walls.uuId; //文章作者id
      // 发送请求
      this.reportwalls(data);
    },
    // 发起举报请求的回调
    async reportwalls(data) {
      let result = await this.$API.reportwalls(data);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
        this.closedialog();
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    // 向父组件发送关闭对话框的回调
    closedialog() {
      this.$emit("clickClose");
    },
  },
};
</script>

<style lang="less" scoped>
.report {
  display: flex;
  justify-content: start;
  .headimg {
    margin-right: 10px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .headimg_div {
    margin-right: 10px;
    background: #8590a6;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
  }
  .picture {
    max-width: 638px;
    padding: 10px 20px 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .box-item {
      width: 33.3333%;
      padding-left: 0.25rem;
      padding-top: 0.25rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
  }
}
.textarea {
  border-radius: 5px;
  text-indent: 5px;
}
</style>